<script lang="ts">
import { TeleportAntdModalFooter } from '~comp/antd-assist';
import ShareBtnBar from './ShareBtnBar.vue';

export const orderSharePopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./OrderShare.vue')),
  {
    title: toRef(() => $t('wWmWj4NipLwI7evTM4xL')),
    wrapClassName: 'ant-cover__Modal-drawer',
    width: 480,
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const props = defineProps<{
  gameCode: string;
  orderNo: string;
}>();

const appStore = useAppStore();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const gameDetailQry = useQuery({
  queryKey: [apis.apiGameLogDetail.id],
  queryFn: () => apis.apiGameLogDetail({ game_code: props.gameCode, order_no: props.orderNo }),
});
const gameDetail = computed(() => gameDetailQry.data.value);
const sendShare = useMutation({
  mutationKey: [apis.apiShareSend.id, 'BetDetail', () => props.orderNo],
  mutationFn: apis.apiShareSend.setDefaultConfig({ errorMessage: $t('25Fg3yUnprjBgYoWbr4Q'), timeout: 20 * 1000 }),
  retry: 3,
});
sendShare.mutate({ requestBody: { order_no: props.orderNo, share_type: 'BetDetail' } });
const bannerSrc = computed(() => `${appStore.handshake?.domain.cdn ?? ''}/share/${props.gameCode}.png`);
const shareUrl = computed(() => {
  const url = new URL(`${appStore.handshake?.domain.www ?? location.origin}/share/site`);
  url.searchParams.append('order_no', props.orderNo);
  url.searchParams.append('game_code', props.gameCode);
  url.searchParams.append('share_type', 'BetDetail');
  url.searchParams.append('ic', userStore.userInfo?.referral_code ?? '');
  url.searchParams.append('i', 'i');

  return url.toString();
});
const text = `\n${$t('gYj1C0ucQ6Bs8tZ0x0C9E', { platform: appStore.appName })}\n`;
</script>

<template>
  <div class="">
    <div class="border-b-(1px slate-600 dashed) pb-3">
      <p class="text-3.5 text-sys-text-body leading-normal">
        {{ $t('8C301kvHkRf6zkD86wM6k', { platform: appStore.handshake?.app_name }) }}
      </p>
    </div>

    <div class="share-win__details-wrap">
      <div class="pt-3 text-sys-text-body leading-normal">
        {{ $t('xHxDAqewJZrhWlDpnYl1s') }}

        <THelptip class="text-3.5 leading-4">
          {{ $t('yHxyjI6Q18DMluCpcMd7X') }}
        </THelptip>
      </div>
      <div class="my-3 border-(1px slate-400 rd-2 solid) p-3 text-3.5 text-sys-text-body leading-normal">
        {{ $t('gYj1C0ucQ6Bs8tZ0x0C9E', { platform: appStore.handshake?.app_name }) }}
      </div>
    </div>

    <div v-if="gameDetail" class="pointer-events-none relative mx-auto mt-6 h-43 w-87">
      <img class="size-full rounded-2 object-cover" :src="bannerSrc">
      <div class="absolute left-6 top-4 text-3.5">
        {{ appStore.appName }}
      </div>
      <div class="absolute bottom-12 left-6 flex items-center">
        <TCurrencyIcon :symbol="gameDetail?.currency?.currency" size="24px" />

        <div class="ml-2 flex gap-2 text-6 font-bold">
          <span>{{ gameDetail.reward_amount }}</span>
          <p class="opacity-[70%]">
            {{ gameDetail.currency?.currency }}
          </p>
        </div>
      </div>
      <div class="absolute bottom-3 left-6 flex items-center text-3.5 opacity-[90%]">
        <img :src="appStore.getCdnResPath('avatar', userInfo?.avatar)" class="mr-2 w-6 rounded-[50%]">
        <span>{{ userInfo?.nickname }}</span>
        <span class="px-2">|</span>
        <span>{{ $d(gameDetail.create_time) }}</span>
      </div>
    </div>
    <TSkeleton v-else class="mx-auto mt-6 w-fit">
      <TSkeleton type="rect" :width="348" :height="172" />
    </TSkeleton>

    <TeleportAntdModalFooter footerClass="!max-w-none !p-0 !mt-1">
      <ShareBtnBar
        class="mobile:(rounded-b-4)"
        :loading="sendShare.isPending.value" :shareUrl="shareUrl" :text="text"
      />
    </TeleportAntdModalFooter>
  </div>
</template>
